<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/project.css">
    <title>Document</title>
    <style>
        html,body{
            scroll-behavior: smooth;
        }
    </style>
</head>

<body>

    <!-- a 标签 可以跳转 网址 ,也可以跳转 项目的其他页面  -->
    <!-- 同时 也可以实现 跳转到 当前页面的某一个元素 (id) -->
    <!-- 头部 -->
    <div class="head">
        <div class="head-c">
            <a href="" class="logo">
                <img src="img/logo.png" alt="">
            </a>
            <ul class="nav">
                <li class="nav-item">
                    <a href="index.html">首页</a>
                    <span class="line"></span>
                </li>
                <li class="nav-item">
                    <a href="">产品</a>
                    <span class="line"></span>

                </li>
                <li class="nav-item">
                    <a href="">项目</a>
                    <span class="line"></span>

                </li>
                <li class="nav-item">
                    <a href="">关于</a>
                    <span class="line"></span>

                </li>
                <li class="nav-item">
                    <a href="news.html">新闻</a>
                    <span class="line"></span>

                </li>
                <li class="nav-item">
                    <a href="">服务</a>
                    <span class="line"></span>

                </li>
            </ul>
        </div>
    </div>
    <!-- banner  -->

    <div class="banner">
        <div class="banner-c">

        </div>
    </div>
    <!-- 主要内容 -->
    <div class="main">
        <div class="main-c">
            <!-- 家居板块  -->

            <div id="home" class="box">
                <div class="box-hd">
                    <div class="title">
                        你的位置: 项目 > <span>项目展示</span>
                    </div>
                    <ul class="nav">
                        <li class="nav-item active">
                            <a href="#home">家居</a>
                            <span class="line"></span>
                        </li>
                        <!-- 模拟导航项目之间 的竖线  -->
                        <li class="col-line"></li>
                        <li class="nav-item">
                            <a href="#office">办公</a>
                            <span class="line"></span>
                        </li>
                        <li class="col-line"></li>

                        <li class="nav-item">
                            <a href="#food">餐饮</a>
                            <span class="line"></span>

                        </li>
                        <li class="col-line"></li>

                        <li class="nav-item">
                            <a href="#more">more</a>
                            <span class="line"></span>

                        </li>
                    </ul>
                </div>
                <div class="box-bd">
                    <ul class="project-list">
                        <li class="project-item">
                            <div class="cover">
                                <img src="img/img1.jpg" alt="">
                            </div>
                            <div class="info">
                                <div class="city">
                                    月渐冷朗 北京
                                </div>
                                <div class="desc">
                                    描述信心.....
                                </div>
                                <div class="icon">

                                </div>
                            </div>
                          
                        </li>
                        <li class="project-item">
                            2
                        </li>
                        <li class="project-item mr0">
                            3
                        </li>
                        <li class="project-item">
                            4
                        </li>
                        <li class="project-item">
                            5
                        </li>
                        <li class="project-item mr0">
                            6
                        </li>

                    </ul>
                </div>
            </div>
            <!-- 办公板块 -->
            <div id="office" class="box">
                <div class="box-hd">
                    <div class="title">
                        你的位置: 项目 > <span>项目展示</span>
                    </div>
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="">家居</a>
                            <span class="line"></span>
                        </li>
                        <!-- 模拟导航项目之间 的竖线  -->
                        <li class="col-line"></li>
                        <li class="nav-item active">
                            <a href="">办公</a>
                            <span class="line"></span>
                        </li>
                        <li class="col-line"></li>

                        <li class="nav-item">
                            <a href="">餐饮</a>
                            <span class="line"></span>

                        </li>
                        <li class="col-line"></li>

                        <li class="nav-item">
                            <a href="">more</a>
                            <span class="line"></span>

                        </li>
                    </ul>
                </div>
                <div class="box-bd">
                    <ul class="project-list">
                        <li class="project-item">
                            <div class="cover">
                                <img src="img/img1.jpg" alt="">
                            </div>
                            <div class="info">
                                <div class="city">
                                    月渐冷朗 北京
                                </div>
                                <div class="desc">
                                    描述信心.....
                                </div>
                                <div class="icon">

                                </div>
                            </div>
                          
                        </li>
                        <li class="project-item">
                            2
                        </li>
                        <li class="project-item mr0">
                            3
                        </li>
                      

                    </ul>
                </div>
            </div>
            <!-- 餐饮 -->
            <div id="food" class="box">
                <div class="box-hd">
                    <div class="title">
                        你的位置: 项目 > <span>项目展示</span>
                    </div>
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="">家居</a>
                            <span class="line"></span>
                        </li>
                        <!-- 模拟导航项目之间 的竖线  -->
                        <li class="col-line"></li>
                        <li class="nav-item">
                            <a href="">办公</a>
                            <span class="line"></span>
                        </li>
                        <li class="col-line"></li>

                        <li class="nav-item active">
                            <a href="">餐饮</a>
                            <span class="line"></span>

                        </li>
                        <li class="col-line"></li>

                        <li class="nav-item">
                            <a href="">more</a>
                            <span class="line"></span>

                        </li>
                    </ul>
                </div>
                <div class="box-bd">
                    <ul class="project-list">
                        <li class="project-item">
                            <div class="cover">
                                <img src="img/img1.jpg" alt="">
                            </div>
                            <div class="info">
                                <div class="city">
                                    月渐冷朗 北京
                                </div>
                                <div class="desc">
                                    描述信心.....
                                </div>
                                <div class="icon">

                                </div>
                            </div>
                          
                        </li>
                        <li class="project-item">
                            2
                        </li>
                        <li class="project-item mr0">
                            3
                        </li>
                      

                    </ul>
                </div>
            </div>

            <!-- more  -->
            <div id="more" class="box">
                <div class="box-hd">
                    <div class="title">
                        你的位置: 项目 > <span>项目展示</span>
                    </div>
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="">家居</a>
                            <span class="line"></span>
                        </li>
                        <!-- 模拟导航项目之间 的竖线  -->
                        <li class="col-line"></li>
                        <li class="nav-item">
                            <a href="">办公</a>
                            <span class="line"></span>
                        </li>
                        <li class="col-line"></li>

                        <li class="nav-item">
                            <a href="">餐饮</a>
                            <span class="line"></span>

                        </li>
                        <li class="col-line"></li>

                        <li class="nav-item active">
                            <a href="">more</a>
                            <span class="line"></span>

                        </li>
                    </ul>
                </div>
                <div class="box-bd">
                    <ul class="project-list">
                        <li class="project-item">
                            <div class="cover">
                                <img src="img/img1.jpg" alt="">
                            </div>
                            <div class="info">
                                <div class="city">
                                    月渐冷朗 北京
                                </div>
                                <div class="desc">
                                    描述信心.....
                                </div>
                                <div class="icon">

                                </div>
                            </div>
                          
                        </li>
                        <li class="project-item">
                            2
                        </li>
                        <li class="project-item mr0">
                            3
                        </li>
                      

                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部  -->

    <div class="foot">
        <div class="foot-c">
            <div class="links">
                <div class="cname">简设装饰有限公司</div>
                <div class="icons">
                    <img src="img/wb.png" alt="">
                    <img src="img/wb.png" alt="">
                    <img src="img/wb.png" alt="">

                </div>
            </div>
            <!-- 竖线 选择用边框模拟 -->
            <!-- <div class="line"></div> -->
            <div class="adress">
                <p>地址：中国地区**分区6号写字楼888室</p>
                <p>地址：中国地区**分区6号写字楼888室</p>
                <p>地址：中国地区**分区6号写字楼888室</p>

            </div>
            <!-- <div class="line"></div> -->
            <div class="tel">
                <p>简设装饰有限公司</p>
                <p>简设装饰有限公司</p>
                <p>简设装饰有限公司</p>


            </div>
        </div>
    </div>

</body>

</html>